<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
            margin-top: 200px;
        }

        div {
            overflow: scroll;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /* display: none; */
        }
    </style>
</head>

<body>
    <div>我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字我里面有很多文字</div>
    <script>
        const div = document.querySelector('div')
        // 页面滚动事件
        window.addEventListener('scroll', function () {
            // console.log('我滚动了');
            // 获取html元素写法
            // document.documentElement

            // console.log(document.documentElement.scrollTop)
            // 必须写在里面  可读写：可对它赋值
            const n = document.documentElement.scrollTop;
            if (n >= 100) {
                div.style.display = "block"
            } else {
                div.style.display = "none"
            }
        })
        // const div = document.querySelector('div')
        // div.addEventListener('scroll', function () {
        //     //  scrollTo被卷去的头部 像素
        //     console.log(div.scrollTop);
        // })
    </script>
</body>

</html>